<template>
    <div class="createresume">
        <div>
<!--            <h3>个人信息</h3>-->
            <el-divider content-position="center">个人信息</el-divider>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="简历名称" prop="resumername">
                    <el-input placeholder="简历名称" v-model="ruleForm.resumername" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="resumename">
                    <el-input placeholder="姓名" v-model="ruleForm.resumename" style="width: 200px;"></el-input>
                </el-form-item>
                    <el-form-item label="性别" prop="resumesex">
                        <el-select v-model="ruleForm.resumesex" clearable placeholder="请选择" style="width: 200px;">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="出生年月" prop="resumebirth">
                        <el-date-picker
                                v-model="ruleForm.resumebirth"
                                type="date"
                                placeholder="选择日期"
                                style="width: 200px;">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="现居住地" prop="resumeaddress">
                        <el-select v-model="ruleForm.resumeaddress" placeholder="选择地址" style="width: 200px;">
                            <el-option-group
                                    v-for="group in options2"
                                    :key="group.label"
                                    :label="group.label">
                                <el-option
                                        v-for="item in group.options2"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-option-group>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="学历" prop="resumeedu">
                        <el-select v-model="ruleForm.resumeedu" clearable placeholder="请选择" style="width: 200px;">
                            <el-option
                                    v-for="item in options3"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工作经验" prop="resumeexpr">
                        <el-select v-model="ruleForm.resumeexpr" clearable placeholder="请选择" style="width: 200px;">
                            <el-option
                                    v-for="item in options4"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                <el-form-item label="手机" prop="resumephone">
                    <el-input placeholder="手机" v-model="ruleForm.resumephone" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="resumeemail">
                    <el-input placeholder="邮箱" v-model="ruleForm.resumeemail" style="width: 200px;"></el-input>
                </el-form-item>
                <el-divider content-position="center">求职意向</el-divider>
                <el-form-item label="职位" prop="jobname">
                    <el-input placeholder="职位" v-model="ruleForm.jobname" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="行业" prop="jobindustry">
                    <el-cascader v-model="ruleForm.jobindustry" style="width: 200px"  placeholder="请选择"
                                 :options="options5"
                                 filterable
                                 clearable
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="工作地点" prop="jobaddress">
                    <el-select v-model="ruleForm.jobaddress" placeholder="选择地址" style="width: 200px;">
                        <el-option-group
                                v-for="group in options6"
                                :key="group.label"
                                :label="group.label">
                            <el-option
                                    v-for="item in group.options6"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
                <el-form-item label="工作性质" prop="jobtype">
                    <el-cascader v-model="ruleForm.jobtype" style="width: 200px"  placeholder="请选择"
                                 :options="options7"
                                 filterable
                                 clearable
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="期望薪资" prop="jobpay">
                    <el-select v-model="ruleForm.jobpay" clearable placeholder="请选择" style="width: 200px;">
                        <el-option
                                v-for="item in options8"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'createresume',
        data() {
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    console.log(reg.test(value));
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };
            return {
                ruleForm: {
                    resumername: '',
                    resumename: '',
                    resumesex: '',
                    resumebirth: '',
                    resumeaddress: '',
                    resumeedu: '',
                    resumeexpr: '',
                    resumephone: '',
                    resumeemail: '',
                    jobname:'',
                    jobindustry:'',
                    jobaddress:'',
                    jobtype:'',
                    jobpay:''
                },
                rules: {
                    resumername: [
                        {required: true, message: '请输入简历名称', trigger: 'blur'},
                    ],
                    resumename: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                    ],
                    resumesex: [
                        {required: true, message: '请选择性别', trigger: 'blur'}
                    ],
                    resumebirth: [
                        {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
                    ],
                    resumeaddress: [
                        {required: true, message: '请选择地址', trigger: 'blur'}
                    ],
                    resumeedu: [
                        {required: true, message: '请选择学历', trigger: 'blur'}
                    ],
                    resumeexpr: [
                        {required: true, message: '请选择工作经验', trigger: 'blur'}
                    ],
                    resumeemail: [
                        {required: true, message: '请输入邮箱地址', trigger: 'blur'},
                        {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                    ],
                    resumephone: [
                        {required: true, message: '请输入手机号码', trigger: 'blur'},
                        {validator: checkPhone, trigger: 'blur'}
                    ],
                    jobname: [
                        {required: true, message: '请选择职位名称', trigger: 'blur'}
                    ],
                    jobindustry: [
                        {required: true, message: '请选择行业', trigger: 'blur'}
                    ],
                    jobaddress: [
                        {required: true, message: '请选择工作地点', trigger: 'blur'}
                    ],
                    jobtype: [
                        {required: true, message: '请选择工作性质', trigger: 'blur'}
                    ],
                    jobpay: [
                        {required: true, message: '请选择期望薪资', trigger: 'blur'}
                    ],

                },
                options: [{
                    value: '男',
                    label: '男'
                }, {
                    value: '女',
                    label: '女'
                }],
                value: '',

                options2: [{
                    label: '热门城市',
                    options2: [{
                        value: '上海',
                        label: '上海'
                    }, {
                        value: '北京',
                        label: '北京'
                    }]
                }, {
                    label: '城市名',
                    options2: [{
                        value: '成都',
                        label: '成都'
                    }, {
                        value: '深圳',
                        label: '深圳'
                    }, {
                        value: '广州',
                        label: '广州'
                    }, {
                        value: '大连',
                        label: '大连'
                    }]
                }],
                value2: '',

                options3: [{
                    value: '初中',
                    label: '初中'
                }, {
                    value: '高中',
                    label: '高中'
                }, {
                    value: '中技',
                    label: '中技'
                }, {
                    value: '大专',
                    label: '大专'
                }, {
                    value: '本科',
                    label: '本科',
                }, {
                    value: '硕士',
                    label: '硕士',
                }, {
                    value: '博士',
                    label: '博士',
                }, {
                    value: '博后',
                    label: '博后',
                }],
                value3: '',

                options4: [{
                    value: '1年',
                    label: '1年'
                }, {
                    value: '1年以下',
                    label: '1年以下'
                }, {
                    value: '1-3年',
                    label: '1-3年'
                }, {
                    value: '3-5年',
                    label: '3-5年'
                }, {
                    value: '5-10年',
                    label: '5-10年',
                }, {
                    value: '10年以上',
                    label: '10年以上',
                }],
                value4: '',

                options5: [{
                    value: 'IT/互联网',
                    label: 'IT/互联网',
                    children: [{
                        value: '计算机软件',
                        label: '计算机软件',
                    }, {
                        value: '网络游戏',
                        label: '网络游戏',
                    }]
                },{
                    value: '服务业',
                    label: '服务业',
                    children:[{
                        value:'酒店',
                        label:'酒店'
                    },{
                        value:'旅游',
                        label:'旅游'
                    }]
                }],

                options6: [{
                    label: '热门城市',
                    options6: [{
                        value: '上海',
                        label: '上海'
                    }, {
                        value: '北京',
                        label: '北京'
                    }]
                }, {
                    label: '城市名',
                    options6: [{
                        value: '成都',
                        label: '成都'
                    }, {
                        value: '深圳',
                        label: '深圳'
                    }, {
                        value: '广州',
                        label: '广州'
                    }, {
                        value: '大连',
                        label: '大连'
                    }]
                }],
                options7: [{
                    value: '实习',
                    label: '实习'
                }, {
                    value: '全职',
                    label: '全职'
                }, {
                    value: '兼职',
                    label: '兼职'
                }],
                options8: [{
                    value: '不限',
                    label: '不限'
                }, {
                    value: '1k以下',
                    label: '1k以下'
                }, {
                    value: '2k-4k',
                    label: '2k-4k'
                }, {
                    value: '4k-6k',
                    label: '4k-6k'
                }, {
                    value: '6k-8k',
                    label: '6k-8k'
                }, {
                    value: '10k-15k',
                    label: '10k-15k'
                }, {
                    value: '15k以上',
                    label: '15k以上'
                }],
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var params= new URLSearchParams();
                        params.append('resumername',this.ruleForm.resumername,)
                        params.append('resumename',this.ruleForm.resumename,)
                        params.append('resumesex',this.ruleForm.resumesex,)
                        params.append('resumebirth',this.ruleForm.resumebirth,)
                        params.append('resumeaddress',this.ruleForm.resumeaddress,)
                        params.append('resumeedu',this.ruleForm.resumeedu,)
                        params.append('resumeexpr',this.ruleForm.resumeexpr,)
                        params.append('resumephone',this.ruleForm.resumephone,)
                        params.append('userid',this.$store.state.user)
                        params.append('resumeemail',this.ruleForm.resumeemail,)
                        params.append('jobname',this.ruleForm.jobname)
                        params.append('jobindustry',this.ruleForm.jobindustry)
                        params.append('jobaddress',this.ruleForm.jobaddress)
                        params.append('jobtype',this.ruleForm.jobtype)
                        params.append('jobpay',this.ruleForm.jobpay)
                        this.axios.post('http://localhost:8001/userresume/add',params).then((res)=>{
                            console.log(res.data.msg);
                            if(res.data.status===200){
                                this.$message({
                                    showClose: true,
                                    type: 'success',
                                    message: res.data.msg,

                                });
                                this.$router.go(0)//刷新页面
                            }
                            else {
                                this.$message({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error'
                                });
                            }
                        }).catch((err)=>{
                            console.log('error'+err);
                        })
                    } else {
                        // alert('err');
                        return false;
                    }
                });
            }
            ,
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        mounted() {
            console.log(this.$store.state.user)
            console.log(this.$store.state.flag)
        }

    }
</script>
<style scoped>
    .createresume {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
</style>
